var InputComponent = React.createClass({
  getInitialState: function() {
    return {
      restNumber: this.props.maxLength,
      content: this.props.value,
    }
  },
  getDefaultProps: function() {
    return {
      type: 'text',
      cols: 40,
      rows: 2,
    }
  },
  handleChange: function(e) {
    this.setState({ content: e.target.value })
    if (this.props.type === 'textarea') {
      this.setState({
        restNumber: this.props.maxLength - e.target.value.length
      })
    }
    this.props.handleText(e.target.value)
  },
	render: function() {
		return (
			<div>
        {
          this.props.type !== 'textarea' ?
          <div className="input">
            <input
              type={this.props.type || 'text'}
              value={this.state.content}
              placeholder={this.props.placeholder}
              onChange={this.handleChange}
            />
            </div>
            :
            <div className="textarea">
              <textarea
                cols={this.props.cols}
                rows={this.props.rows}
                maxLength={this.props.maxLength}
                value={this.state.content}
                placeholder={this.props.placeholder}
                onChange={this.handleChange}
                style={{
                  resize: this.props.resize ? 'auto' : 'none',
                }}
              >
              </textarea>
              <span>{this.state.restNumber }字</span>
            </div>
        }
			</div>
		);
	}
});
module.exports = InputComponent;